<template>
<div style="width: 630px;margin:0 auto;" v-loading="isLoading">
    <div  class="" style="display: flex;justify-content: center;align-items: center;">
      <el-checkbox v-model="companyPrint">公司存根</el-checkbox>
      <el-checkbox v-model="studentPrint">學生存根</el-checkbox>
          <el-button class="ml-[15px]" size="small" @click="onPrint"
        >打印</el-button
      >
    </div>

    <div v-for="stubItem,stubIndex in stubs" :key="stubIndex" id="pdfDom" class="tableCenter textCenter"
      style="background-color: #FFFFFF;">
      <!-- <div class="textSmallNormal printHide">
        <br>
        <input type="checkbox" name="PRINT_COPY1" value="1" onclick="ChangePrintOption();" checked="checked">公司存根&nbsp;&nbsp;&nbsp;
        <input type="checkbox" name="PRINT_COPY2" value="1" onclick="ChangePrintOption();">學生存根&nbsp;&nbsp;&nbsp;
        <input class="buttonForm" type="button" value="列印" onclick="window.print();"><br>
        <br>
      </div> -->
      <div class="tableCenter" >
        <table class="tableCenter w100p noBorder" cellpadding="0" cellspacing="0" style="text-align:left">
          <tbody>
            <tr>
              <td class="printHugeBoldNormal" width="210"><img src="../../../../image/logo.png" alt="" border="0"
                  ></td>

              <td class="printLargeBoldNormal textRight">退款</td>
            </tr>
            <tr>
              <td class="printSmallNormal" colspan="2">
                分校&nbsp;:&nbsp;{{formData.school_name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <!-- 電話&nbsp;:&nbsp;{{formData.student_name}} -->
              </td>
            </tr>
            <tr>
              <td class="printSmallNormal" colspan="2">地址&nbsp;:&nbsp;{{formData.school_name}}</td>
            </tr>
          </tbody>
        </table><br>
        <table class="tableCenter w100p noBorder" cellpadding="2" cellspacing="0" style="text-align:left">
          <colgroup>
            <col width="12%">
            <col width="37%">
            <col width="2%">
            <col width="12%">
            <col width="37%">
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal">編號&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot"><span
                  class="">({{ formData.number}})</span>
                (重印)</td>
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">日期&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">{{ formData.create_time}} </td>
              <!-- 27<sup>th</sup> October 2020 -->
            </tr>
            <tr>
              <td class="printSmallNormal">學生&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">{{formData.student_name}}</td> <!-- (STD000827)-->
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">員工&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">{{username}}</td>
            </tr>
            <tr>
              <td class="printSmallNormal">列印&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">{{username}}</td>
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">退款日期&nbsp;</td>
              <td class="printSmallNormal borderBottom1dot">{{formData.update_time}}</td>
            </tr>
          </tbody>
        </table><br>

        <table class="tableCenter w100p noBorder collapse" cellpadding="2" cellspacing="0">
          <colgroup>
            <col width="5%"><!-- 項目 -->
            <col width="15%"><!-- 發票編號 -->
            <col width="71%"><!-- 課程/產品 -->
            <col width="10%"><!-- 退款 -->
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal textLeft vTop borderBottom1">項目</td>
              <td class="printSmallNormal textLeft vTop borderBottom1">發票編號</td>
              <td class="printSmallNormal textLeft vTop borderBottom1">課程/產品</td>
              <td class="printSmallNormal textRight vTop borderBottom1">退款</td>
            </tr>
          </tbody>
        </table><br>
        
        <table
          v-for="(item, index) in wrapList"
          :key="'a' + index"
         class="tableCenter w100p noBorder collapse"
          cellpadding="2" cellspacing="0">
          <colgroup>
            <col width="5%"><!-- 項目 -->
            <col width="15%"><!-- 發票編號 -->
            <col width="71%"><!-- 課程/產品 -->
            <col width="10%"><!-- 退款 -->
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal textLeft vTop borderBottom1">1</td>
              <td class="printSmallNormal textLeft vTop borderBottom1">{{item.number}}</td>
              <td class="printSmallNormal textLeft vTop borderBottom1">{{item.name}}</td>
              <td class="printSmallNormal textRight  vTop borderBottom1">{{item.refund}}</td>
            </tr>
          </tbody>
        </table>

        <table class="tableCenter w100p noBorder collapse" cellpadding="2" cellspacing="0" style="text-align:left">
          <colgroup>
            <col width="18%">
            <col width="64%">
            <col width="18%">
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal borderTop1">退款方式：{{formData.payment.name}}</td>
              <td class="printSmallNormal textRight borderTop1"></td>
              <td class="printSmallNormal textRight borderTop1">總計：&nbsp;&nbsp;&nbsp;{{formData.refund}}</td>
            </tr>
          </tbody>
        </table><br>
        <table class="tableCenter w100p noBorder" cellpadding="0" cellspacing="0">
          <colgroup>
            <col width="80%">
            <col width="20%">
          </colgroup>
          <tbody>
            <tr>
              <td class="textLeft"></td>
              <!-- <td class="textLeft">備注：{{formData.collectionRemarks}}</td> -->
              <td class="vTop">
                <table class="w100p noBorder" cellpadding="2" cellspacing="0">
                  <tbody>
                    <tr class="h70">
                      <td class="printSmallNormal textCenter">
                        <div class="signature"></div>
                      </td>
                    </tr>
                    <tr>
                      <td class="printSmallNormal textCenter">簽名(學生)</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table><br>

        <table class="tableCenter w100p noBorder" cellpadding="2" cellspacing="0" style="text-align:left">
          <tbody>
            <tr>
              <td class="printSmallNormal ">
                離開前請點算清楚退款數目，出門後恕不表受任何追究<br>
              </td>
            </tr>
          </tbody>
        </table><br>
        <table class="tableCenter w100p noBorder" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <!-- <td class="printLittleNormal textCenter">系統提供 : </td> -->
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue' 
import {useRoute} from 'vue-router'
const companyPrint = ref(true);
const studentPrint = ref(true);

const stubs = computed(() => {
  const arr = [];
  if (companyPrint.value) {
    arr.push({
      stubName: "公司存根",
    });
  }
  if (studentPrint.value) {
    arr.push({
      stubName: "學生存根",
    });
  }
  console.log(arr);
  return arr;
});

const route = useRoute()
console.log(route);
const formData = ref(JSON.parse(route.query.data));
const username = ref(route.query.username)
console.log(formData.value);
const wrapList = ref([]);
wrapList.value = [
  ...wrapList.value,
  ...formData.value.item.course,
  ...formData.value.item.product,
  ...formData.value.item.products_group,
  ...formData.value.item.ticket,
];
    const onPrint =()=> {
    setTimeout(() => {
        window.print()
    }, 200)
    }

</script>

<style lang='less'  scoped>
#pdfDom {
  /* display: inline-block; */
  /* position: fixed; */
  padding: 20px;
  font-size: 12px;
  overflow: hidden;
  border-bottom: 2px solid #000;
  z-index: 555;
}
.formButton {
  width: 60px;
}
* {
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, "Helvetica Neue",
    Helvetica, sans-serif;
  color: #000000;
}

.textCenter {
  text-align: center;
}
.tableCenter {
  margin: 0 auto;
}
.w100p {
  width: 100%;
}
.noBorder {
  border: 0;
}
.printHugeBoldNormal {
  font-family: Arial;
  font-size: 16pt;
  font-weight: bold;
}
.printLargeBoldNormal {
  font-family: Arial;
  font-size: 12pt;
  font-weight: bold;
}
.textRight {
  text-align: right;
}
.printSmallNormal {
  font-family: Arial;
  font-size: 8pt;
}
.borderBottom1dot {
  border-bottom: 1px dotted #cccccc;
}
.floatRight {
  float: right;
}
table.collapse {
  border-collapse: collapse;
}
.textLeft {
  text-align: left;
}
.vTop {
  vertical-align: top;
}
.borderTop1 {
  border-top: 1px solid black;
}
.borderBottom1 {
  border-bottom: 1px solid black;
}
.spaces {
  white-space: break-spaces;
}
</style>